<!-- 复盘数据 -->
<template>
  <div class="main-main">

    <!-- 头部 -->
    <div class="el-header">
      <!-- log -->
      <img src="../../../img/复盘数据/log.png" alt="" class="header-img" />
      <span class="header-title">马克华菲男装官方</span>
      <div class="header-hours">
        直播时长:2020-06-21 至 2020-06-22 直播时长06小时50分
      </div>

      <!-- 数据列表 -->
      <ul class="header-ul">
        <li>
          <div>付款金额</div>
          <div class="header-shu">
            <span class="header-money">￥</span>
            <span>10486</span>
          </div>
        </li>
        <li>
          <div>人均观看时长</div>
          <div class="header-shu">
            <span>25</span>
            <span class="header-minutes">分钟</span>
          </div>
        </li>
        <li>
          <div>观看总人数</div>
          <div class="header-shu">1048</div>
        </li>
        <li>
          <div>人气峰值</div>
          <div class="header-shu">1048</div>
        </li>
        <li>
          <div>全场ROI</div>
          <div class="header-shu">104</div>
        </li>
        <li>
          <div>自然流量转化率</div>
          <div class="header-shu">86</div>
        </li>
        <li>
          <div>付费流量转化率</div>
          <div class="header-shu">16</div>
        </li>
      </ul>
    </div>

    <!-- 中间部分 -->
    <div class="el-main">
      <!-- 左侧图片 -->
      <div>
        <img src="../../../img/复盘数据/主图.png" alt="" class="main-left-img" />
      </div>
      <!-- 右侧折线图 -->
      <div class="main-tu">
        <div class="main-tu-du">
          <div class="main-tu-k">
            <el-checkbox v-model="checked1" label="进场人数" size="large" />
          </div>
          <div class="main-tu-k">
            <el-checkbox v-model="checked2" label="在线人数" size="large" />
          </div>
          <div class="main-tu-k">
            <el-checkbox v-model="checked3" label="转化率" size="large" />
          </div>
          <div class="main-tu-k">
            <el-checkbox v-model="checked4" label="转粉率" size="large" />
          </div>
          <div class="main-tu-k">
            <el-checkbox v-model="checked5" label="互动率" size="large" />
          </div>
        </div>
        <div id="fupan"></div>
      </div>
    </div>

    <!-- 下面部分 -->
    <div class="el-footer">
      <!-- 标题 -->
      <div class="footer-biao">商品数据</div>
      <!-- 搜索框 -->
      <div class="footer-sou">
        <span> 商品名称：<input class="footer-inp" /></span>
      </div>
      <!-- 列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="商品信息" min-width="55px" class="footer-hang">
          <img src="../../../img/复盘数据/小图.png" alt="" style="margin-top: 5px" />
        </el-table-column>
        <el-table-column prop="address" fixed="right" min-width="800px">
          <div class="footer-spa">
            <div class="footer-sp">时尚欧美风短裤款风衣</div>
            <div>￥1200</div>
          </div>
        </el-table-column>
        <el-table-column prop="address" label="产品讲解时长" fixed="right" min-width="200px" />
      </el-table>
      <!-- 分页 组件-->
      <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[1]"
          :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
          :total="4" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>


</template>

<script lang="ts" setup>
import { ref } from "vue";

import { onMounted } from "vue";
import * as echarts from "echarts";
// 折线图
const disabled = ref(false);
const checked1 = ref(true);
const checked2 = ref(false);
const checked3 = ref(false);
const checked4 = ref(false);
const checked5 = ref(false);
// 分页
const currentPage4 = ref(4);
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
// 折线图
onMounted(() => {
  const fupan = document.getElementById("fupan");

  if (fupan) {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(fupan);
    // 绘制图表
    myChart.setOption({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: ["进场人数", "在线人数", "转化率", "转粉率", "互动率"],
        left: "3%",
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "进场人数",
          type: "line",
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "在线人数",
          type: "line",
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "转化率",
          type: "line",
          emphasis: {
            focus: "series",
          },
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: "转粉率",
          type: "line",
          emphasis: {
            focus: "series",
          },
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: "互动率",
          type: "line",
          emphasis: {
            focus: "series",
          },
          data: [320, 232, 201, 334, 182, 191, 300],
        },
      ],
    });

    // console.log(myChart.getOption().legend[0].data);
  }
});
// 下面部分
const tableData = [
  {
    name: "Tom",
    address: "2019-07-17 16:40",
  },
  {
    name: "Tom",
    address: "2019-07-17 16:40",
  },
  {
    name: "Tom",
    address: "2019-07-17 16:40",
  },
  {
    name: "Tom",
    address: "2019-07-17 16:40",
  },
];
// 分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<style lang="less" scoped>
.el-header {
  width: 100%;
  height: 176px;
  background-color: #fff;
  border-radius: 10px;
  position: relative;

  .header-img {
    width: 88px;
    height: 59px;
    position: absolute;
    top: 14px;
    left: 9px;
  }

  .header-title {
    width: 128px;
    height: 16px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #313033;
    line-height: 1px;
    position: absolute;
    top: 25px;
    left: 77px;
  }

  .header-hours {
    width: 400px;
    height: 11px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #cccccc;
    line-height: 1px;
    position: absolute;
    top: 46px;
    left: 77px;
  }

  .header-ul {
    width: 88%;
    height: 80px;
    display: flex;
    position: absolute;
    top: 90px;
    left: 100px;

    li {
      margin: 5px;
      width: 13%;
      height: 80px;
      //   background-color: aqua;
      position: relative;

      div {
        width: 100%;
        height: 18px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #313033;
        line-height: 18px;
      }

      .header-shu {
        width: 100%;
        height: 39px;
        font-size: 40px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #313033;
        position: absolute;
        bottom: 0;

        .header-money {
          font-size: 16px;
          font-weight: 600;
        }

        .header-minutes {
          font-size: 16px;
          font-weight: 600;
        }
      }
    }
  }
}

// main中间
.el-main {
  width: 100%;
  margin-top: 15px;
  padding: 0;
  overflow: hidden;
  position: relative;

  .main-left-img {
    width: 24%;
  }

  .main-tu {
    position: absolute;
    top: 0;
    left: 25%;
    width: 74%;
    height: 374px;
    background: #fff;
    border-radius: 10px;

    .main-tu-du {
      display: flex;
      margin-left: 20px;
      margin-top: 10px;

      .main-tu-k {
        width: 120px;
        border: 2px solid #8b68ff;
        border-radius: 5px;
        margin: 0 10px;
        text-align: center;
      }
    }

    #fupan {
      width: 100%;
      height: 300px;
      position: absolute;
      margin-top: 10px;
    }
  }
}

// main底部
.el-footer {
  margin-top: 10px;
  background-color: #fff;
  border-radius: 10px;
  padding-top: 10px;
  height: 100%;

  .footer-biao {
    height: 16px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #313033;
    line-height: 16px;
  }

  .footer-sou {
    width: 100%;
    height: 44px;
    line-height: 44px;
    background-color: #f5f5f5;
    margin: 10px 0;
    padding-left: 15px;

    .footer-inp {
      height: 24px;
    }
  }

  .el-row {
    margin-bottom: 20px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    background-color: #8b68ff;
  }

  .footer-spa {
    margin: 0;
  }

  .demo-pagination-block {
    margin: 10px 0;
  }
}
</style>
